<template>
  <div class="sys-user-info">
    <div class="info-card">
      <div class="card-top">
        <!-- 左侧头像和名称 -->
        <div class="avatar_name">
          <div class="avatar">
            <img :src="userInfo.avatar" alt="头像">
          </div>
          <!-- <b style="font-size: 20px">{{ userInfo.name }}</b> -->
        </div>
        <!-- 右侧详细信息 -->
        <div class="detailed-info">
          <div>
            <span class="label">用户名：</span>
            <span><span class="info-content">{{ userInfo.username }}</span></span>
          </div>
          <div>
            <span class="label">单位名称：</span>
            <span v-if="!isEditable_userName"><span class="info-content">{{ userInfo.unitsName }}</span><i
                @click="isEditable_userName = true" class="el-icon-edit"></i></span>
            <span v-else> <input type="text" class="input" v-model="userInfo.unitsName">
              <i @click="isEditable_userName = false" class="el-icon-edit"></i></span>

          </div>
          <div>
            <span style="display: inline-block" class="label">地址：</span>
            <span v-if="!isEditable_address"><span class="info-content">{{ userInfo.address }}</span><i
                @click="isEditable_address = true" class="el-icon-edit"></i></span>
            <span v-else> <input type="text" class="input" v-model="userInfo.address">
              <i @click="isEditable_address = false" class="el-icon-edit"></i></span>

          </div>
          <div>
            <span class="label">联系电话：</span>
            <span v-if="!isEditable_telephone"><span class="info-content">{{ userInfo.telephone }}</span><i
                @click="isEditable_telephone = true" class="el-icon-edit"></i></span>
            <span v-else> <input type="text" class="input" v-model="userInfo.telephone">
              <i @click="isEditable_telephone = false" class="el-icon-edit"></i></span>
          </div>
        </div>
      </div>
      <div class="card-bottom">
        <el-button type="danger" @click="ModifyPwd">修改密码</el-button>
        <div>
          <!-- <el-button type="primary" @click="canceledit">取消编辑</el-button> -->
          <el-button type="success" @click="SaveUserInfo">保存</el-button>
        </div>
      </div>
    </div>
    <modifypwd-dialog :dialogVisible="dialogVisible" @closeDialog="closeDialog" :password="userInfo.password">
    </modifypwd-dialog>

  </div>


</template>

<script>
import ModifypwdDialog from '@/views/PersonCenter/dialogcomps/ModifypwdDialog'
export default {
  name: "UserInfo",
  data() {
    return {
      userInfo: {
        unitsName: "",
        id: "",
        username: "",
        password: "",
        idNumber: "",
        telephone: "",
        address: "",
        avatar: ""
      },
      isEditable_userName: false,
      isEditable_address: false,
      isEditable_telephone: false,
      dialogVisible: false, // 新增对话框是否显示
    }
  },
  components: {
    ModifypwdDialog
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    //获取管理员信息
    getUserInfo() {
      this.$axios.get("/adminInfo").then(res => {
        this.userInfo = res.data.data
      })
    },
    //修改密码
    ModifyPwd() {
      this.dialogVisible = true;
    },
    // 关闭修改密码dialog
    closeDialog() {
      this.dialogVisible = false;
    },
    //保存信息
    SaveUserInfo() {
      this.isEditable_userName = false;
      this.isEditable_address = false;
      this.isEditable_telephone = false;
      var updatauserInfo = {
        name: this.userInfo.name,
        telephone: this.userInfo.telephone,
        address: this.userInfo.address,
      }
      this.$axios.post("/adminUpdateInfo", updatauserInfo).then(res => {

      })
    },
    //取消编辑
    canceledit() {
      this.isEditable_userName = false;
      this.isEditable_address = false;
      this.isEditable_telephone = false;
    }
    // // 展示dialog
    // showDialog() {
    //   this.dialogVisible = true;
    // },
  },

}
</script>

<style scoped>
.sys-user-info {
  position: relative;
  height: 100%;
  width: 100%;
}

/* 信息卡片 */
.info-card {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 600px;
  height: 300px;
  padding: 0 30px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  border-radius: 20px;

  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

/* 卡片上部分 */
.card-top {
  display: flex;
  justify-content: space-between;
}

/* 头像和名称 */
.avatar_name {
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  height: 150px;
  padding-right: 30px;
  border-right: 1px #efefef solid;
}

.avatar {
  margin: auto 10px;
}

/* 头像 */
.avatar img {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  border: 1px #eee solid;
}

/* 右侧详细信息 */
.detailed-info {
  height: 150px;
  padding-left: 30px;
  line-height: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.label {
  color: #888;
  display: inline-block;
  width: 100px;
  text-align: right;
  font-size: 18px;
}

.info-content {
  display: inline-block;
  width: 260px;
  vertical-align: bottom;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 17px;
}

.el-icon-edit {
  color: #e05252;
  margin-left: 10px;
}

.input {
  width: 247px;
  font-size: 15px;
}

/*  */
.card-bottom {
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
}
</style>
